<template>
<div class="box">
  <div class="logo">
<span class="iconfont icon-meikuangqiye"></span>
  </div>
  <p class="title">人脸识别考勤后台管理系统</p>

 <el-row>
        <el-col :span="8">
            <!-- { type: 'number', min:2, message: '长度不能少于2位'}, -->
            <el-form :model="userinfo" :rules="rules" ref="formRef" >
  <el-form-item  prop="username" >
 
   <!-- <span class="iconfont icon-geren2"></span> -->
    <el-input type="text" v-model="userinfo.username" autocomplete="off" placeholder="请输入用户名称" >
     
    </el-input>
  
  
  </el-form-item>
   <el-form-item  prop="password" >
    <el-input type="text" v-model="userinfo.password" autocomplete="off" placeholder="请输入登录密码"></el-input>
  </el-form-item>
  <p class="title1">忘记登录密码请联系管理员</p>

  <el-form-item>
    <el-button type="primary" @click="submitForm()" class="el-button">用户登录</el-button>
  </el-form-item>
</el-form>
        </el-col>
    </el-row>
    
</div>
</template>

<script>
import"../../style/icones/iconfont.css"
   export default {
    data() {
      return {
        userinfo: {
          username: '',
          password:'',
        },
        // 再此写会有劫持 
        // rules:{
        //     username: [ { required: true, message: '账号不能为空'},
        //                 { validator: this.validateUsername,trigger:['blur','change']}],
        //     password:[{required: true, message: '密码不能为空'}],
        // },
      };
    },
    computed:{
        rules(){
            return{
            username: [ { required: true, message: '账号不能为空'},
                        { validator: this.validateUsername,trigger:['blur','change']}],
            password:[{required: true, message: '密码不能为空'}],
            }
        }
    },
    methods: {
        // 自定义验证规则
        validateUsername(rule,value,callback){
            if(/^z/i.test(value)){
                callback(new Error('关键词出现了'))            
            }else{
                callback()
            }
        },
        // 表单提交
      submitForm() {
        this.$refs['formRef'].validate( async (valid) => {
          if (valid) {
              // 验证成功
            //console.log(this.userinfo)
          let ret = await this.$store.dispatch('shouye/',this.userinfo)
            console.log(ret)
            if(!ret){
                this.$message.error('账号或密码不正确');
            }else{
                //到后台首页
                console.log('后台')
            }
         } else {
           // 验证不成功
           this.$message.error('账号或密码不正确');
            return false;
          }
        });
      },
    }
  }
</script>



<style lang="scss" >
body,html{background: #F5F7FA;}
.box{
  width: 500px;
  height: 550px;
  background-color: #fff;
  margin: 100px auto;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 15px ;
}
.logo{background-color:#409EFF;
margin: 40px auto;
width: 100px;
height: 100px;
border-radius: 50%;}
.icon-meikuangqiye{font-size: 70px;
line-height: 100px;
color: #fff;
}
.title{font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
    color: rgb(64, 158, 255);}
.title1{width: 300px;
margin-left: 150px;
    color: rgb(64, 158, 255);
}
.el-row{
    // display: flex;
    width: 300px;
    margin-left: 32px;
   
    .el-col{
        margin: 20px 20px;
    }
}
.el-input__inner{width: 400px;
height: 60px;
}
.el-form-item__error{
  width: 90px;
}
.el-button{
  width: 400px;
  height: 45px;
}
</style>